<template>
  <div class="list-view">
    <!-- 登录页面--平台的数据
    <button @click="updateUserInfo">更新用户信息</button>
    <button @click="forceLogout">强制登出</button> -->
    <LoginForm />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "TaskView",
  components: {}
});

// 导入全局的 loginModule 实例
// import { loginModule } from '@/main';


import { ref, provide } from 'vue';
import createLoginModule from "mctp-modules-login/src/index";
// 4. 局部注册插件提供的组件（替代全局app.component）
import LoginForm from "mctp-modules-login/src/components/index.vue";

// 1. 定义局部数据类型和初始数据（与之前main.ts中的逻辑一致）
type MyEventData = {
  loginStatus: "logged" | "unlogged" | "logging";
  userInfo?: { username: string };
  errorMessage?: string;
};
type LoginParams = { username: string; password: string };
const initialData: MyEventData = { loginStatus: "unlogged" };

// 2. 定义局部指令处理方法（仅处理当前容器内的插件指令）
const handleCmd = (moduleName: string, cmd: string, params?: any) => {
  if (moduleName === "LoginForm") { // 注意这里用插件config.id

    console.log("平台触发的登录模块指令：", cmd, params);

    if (cmd === "login") {
      // 处理登录逻辑（和之前一样）
      loginModule.updateEventData({
        loginStatus: "logged",
        userInfo: { username: params.username }
      });
    }
  }
};

// 3. 创建插件实例
const loginModule = createLoginModule<MyEventData, LoginParams>(initialData, handleCmd);

// 5. 局部提供依赖注入方法（替代全局app.provide）
provide("get-login-data", () => loginModule.getEventData());
provide("send-login-cmd", (cmd: string, params?: LoginParams) => {
  loginModule.sendCommand(cmd, params); // 依然通过sendCommand发送
});

// 6. 手动调用插件的startup（全局安装时Vue会自动调用，局部需要手动触发）
loginModule.startup();


// 更新用户信息（外部向组件传递数据）
const updateUserInfo = () => {
  loginModule.updateEventData({
    userInfo: { username: '新用户名' } // 只更新需要变化的字段（Partial特性）
  });
};

// 强制登出（更新登录状态）
const forceLogout = () => {
  loginModule.updateEventData({
    loginStatus: 'unlogged',
    errorMessage: '您已被强制登出' // 同时传递错误信息
  });
};

</script>

<style lang="scss" scoped>
.list-view {
  padding: 12px;
}
</style>
